<template>
  <div class="index">
   <van-swipe :autoplay="3000" class="swipeBox">
  <van-swipe-item v-for="(image, index) in images" :key="index">
    <img v-lazy="image" />
  </van-swipe-item>
</van-swipe>
<div class="listBox">
  <div class="pickUp">
    <div style="float:left;">
      <span style="font-size:13px">光彩两岸电商谷</span>
      <br>
      <span style="font-size:12px;color:#ccc;margin-top:3px">距您135m</span>
    </div>
    <div style="float:right;margin-right:10px;margin-top:8px">
     <van-radio-group v-model="radio" direction="horizontal">
  <van-radio name="1" icon-size="13px" style="font-size:13px">自提</van-radio>
  <van-radio name="2" icon-size="13px" style="font-size:13px">外卖</van-radio>
</van-radio-group>
    </div>
  </div>
  <div class="pickUpList" style="margin-top:17px"
  is="router-link"
  to="/menu"
  tag="div"
  >
    <span class="listLeft">现在下单</span>
    <router-link
    to="/menu"
    class="listRight iconfont"
    style="margin-top:-5px"
    tag="span"
    >
    &#xe78c;</router-link>
    <!-- <span class="listRight iconfont" style="margin-top:-5px"></span> -->
  </div>
  <div class="pickUpList"
    is="router-link"
    to="/wallet"
    tag="div"

  >
    <!-- <span class="listLeft">咖啡钱包</span> -->
    <router-link
    class="listLeft"
    to="/wallet"
    tag="span"
    >优惠券</router-link>
    <span class="listRight iconfont">&#xe774;</span>
  </div>
  <div class="pickUpList"
  is="router-link"
    to="/gift"
    tag="div"
  >
    <span class="listLeft">送他咖啡</span>
    <!-- <span class="listRight iconfont">&#xe6f9; -->
    <router-link
    class="listRight iconfont"
    to="/gift"
    tag="span"
    >&#xe6f9;</router-link>
  </div>
  <div class="pickUpList" style="border-bottom:1px solid #ccc">
    <span class="listLeft">企业账号</span>
    <span class="listRight iconfont">&#xe67f;</span>
  </div>
</div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Swipe, SwipeItem, Lazyload, RadioGroup, Radio } from 'vant'

Vue.use(Swipe)
Vue.use(SwipeItem)
Vue.use(Lazyload)
Vue.use(Radio)
Vue.use(RadioGroup)
export default {
  name: 'index',
  data () {
    return {
      images: [
        'https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1594447481&di=24bf603e26b5bd1322bbc7cd85168348&src=http://photo.16pic.com/00/13/57/16pic_1357031_b.jpg',
        'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1594457562564&di=3b43c9e5c92b971d84ba0504cb6dfcbf&imgtype=0&src=http%3A%2F%2Fpic33.photophoto.cn%2F20141125%2F0042040524192940_b.jpg',
        'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1594458289816&di=eb9ab6554d787823ae4c85f4bfb6d7a6&imgtype=0&src=http%3A%2F%2Fimg.mp.itc.cn%2Fupload%2F20161216%2Fac55af10b33c460ca0d5ed0b1b705392_th.jpg'
      ],
      radio: '1'
    }
  }
}
</script>

<style lang="scss" scoped>
.swipeBox{
  width: 100%;
  height: 230px;
  img{
    width: 100%;
  }
}
.listBox{
padding:1px 20px;
.pickUp{
  overflow: hidden;
  margin-top:17px
}
.pickUpList{

  line-height: 50px;
  overflow: hidden;
  border-top: 1px solid #ccc;
  .listLeft{
    float: left;
    font-size: 13px;
  }
  .listRight{
    float: right;
  }
}
.iconfont{
  font-size: 40px;
  opacity: 0.5;
}
}

</style>
